<template>
	<view class="container">
		<view class="header">
			<view class="info">
				<image src="https://q-api.guguzi.com/api/file/download/DnFjrBx6SK_头像 (1).png" mode="" class="icon">
				</image>
				<view class="">
					<view class="name">
						无人机学员
					</view>
					<view class="">
						本次练习已完成,快去告诉好友~
					</view>
				</view>
			</view>
			<view class="box">
				<view class="item">
					<view class="num">
						{{resultInfo.num||'--'}}
					</view>
					<view class="gray">
						本次练习
					</view>
				</view>
				<view class="item">
					<view class="num">
						{{resultInfo.duration||'--'}}
					</view>
					<view class="gray">
					  练习时长
					</view>
				</view>
				<view class="item">
					<view class="num">
						{{resultInfo.unit||'--'}}秒/题
					</view>
					<view class="gray">
					  答题速配
					</view>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="title">
				本次练习正确率
			</view>
			<view class="score">
				<view class="num">
					{{resultInfo.rate}}
				</view>
				<view class="">
					%
				</view>
			</view>
			<view class="statistics">
				<view class="top">
					<view class="left">
						<view class="">
							累计答题{{resultInfo.totalAnswer}}题
						</view>
						<view class="num">
							{{resultInfo.answerRate}}
						</view>
					</view>
					<view class="right">
						剩余未做{{resultInfo.notAnswer}}题
					</view>
				</view>
				<view class="bar">
					<u-line-progress :percentage="30" activeColor="#1967E5" :showText="false"></u-line-progress>
				</view>
			</view>
			<view class="types" v-if="resultInfo.errors&&resultInfo.errors.length>0">
				<view class="item" @tap="toExamDetail(3)">
					<view class="left">
						错题回顾
					</view>
					<view class="right">
						<view class="mr10">
							{{resultInfo.errors.length}}题
						</view>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="btn" @tap="toQuestion">
				继续练习
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		unref,
		toRaw,
		toRefs,
		nextTick
	} from 'vue'
	import {
		onInit,
		onLoad,
		onReady,
		onShow,
		onHide,
		onUnload,
		onResize,
	} from '@dcloudio/uni-app'
	import {
		$http,
		toLogin,
		timestampToDateTime
	} from "@/common"
	const resultInfo = ref({
	})
	onLoad((options) => {
		if(options.info&&JSON.parse(options.info)){
			resultInfo.value = JSON.parse(options.info)
		}
	})
	function toQuestion() {
		uni.redirectTo({
			url: '/pages/home/question?type=0'
		})
	}
	function toExamDetail(val){
		uni.navigateTo({
			url: '/pages/home/examDetail?list='+JSON.stringify(resultInfo.value.errors)
		})
	}
</script>
<style lang="scss" scoped>
	.container {
		height: 100%;
		background-color: #F8F9FB;

		.header {
			width: 100%;
			height: 500rpx;
			background: linear-gradient(to bottom, #1667EA, #F9F9F9);
			padding: 20rpx;
			color: #fff;

			.info {
				display: flex;

				.icon {
					width: 100rpx;
					height: 100rpx;
					margin-right: 20rpx;
				}

				.name {
					font-size: 34rpx;
					margin-bottom: 8rpx;
				}
			}

			.box {
				background-color: #297FEE;
				display: flex;
				justify-content: space-between;
				padding: 26rpx 60rpx;
				margin: 34rpx 0 10rpx 0;
				border-radius: 20rpx;
                .item{
					text-align: center;
				}
				.num {
					font-size: 34rpx;
				}

				.left {
					text-align: center;
					margin-right: 200rpx;
				}

				.right {
					text-align: center;
				}

				.gray {
					color: rgba(255, 255, 255, 0.8);
				}
			}
		}

		.content {
			margin: -190rpx 20rpx 0 20rpx;
			border-radius: 20rpx;
			background-color: #fff;
			padding: 40rpx 26rpx 30rpx 26rpx;

			.title {
				font-size: 34rpx;
				font-weight: bold;
				text-align: center;
			}

			.score {
				display: flex;
				justify-content: center;
				align-items: baseline;
				color: #1967E5;
				margin: 10rpx 0;

				.num {
					font-size: 60rpx;
					font-weight: bold;
				}
			}
            .statistics{
				margin: 30rpx 0 40rpx 0;
				.top{
					display: flex;
					justify-content: space-between;
					margin-bottom: 10rpx;
					.left{
						display: flex;
						align-items: center;
						.num{
							margin-left: 6rpx;
						}
					}
					.right{
						color: #778899;
					}
				}
			}
			.types {
				.item {
					background-color: #F8F9FB;
					display: flex;
					justify-content: space-between;
					padding: 26rpx 20rpx;
					margin: 20rpx 0;

					.left {
						font-weight: bold;
					}

					.right {
						display: flex;
						align-items: center;
					}

					.mr10 {
						margin-right: 4rpx;
					}
				}
			}
		}

		.footer {
			position: fixed;
			bottom: 0;
			width: 100%;
			background-color: #fff;
			padding: 30rpx;

			.btn {
				color: #1967E5;
				font-weight: bold;
				text-align: center;
				background-color: #EAF2FF;
				height: 70rpx;
				line-height: 70rpx;
				border-radius: 20rpx;
			}
		}
	}
</style>